<template>
  <div class="sliding-pictures">
    <div class="container">
      <div id="captcha" style="position: relative"></div>
    </div>
    <div class="operation">
      <n-button title="关闭验证码" class="bottom-box" tertiary @click="closePupUp">
        <template #icon>
          <n-icon><close-filled /></n-icon>
        </template>
      </n-button>
      <n-button title="刷新验证码" class="bottom-box" tertiary @click="Event_restImg">
        <template #icon>
          <n-icon><refresh-filled /></n-icon>
        </template>
      </n-button>
    </div>
  </div>
</template>

<script setup>
import jigsaw from "./initCanvas.js";
import { ref, onMounted } from "vue"
import { CloseFilled, RefreshFilled } from '@vicons/material';

const emit = defineEmits();
const objImg = ref(null);

// 初始化图片
const Event_initImg = () => {
  objImg.value = {};
  document.getElementById("captcha").innerHTML = "";
  objImg.value = new jigsaw(document.getElementById("captcha"), () => {
    // 成功的回调
    emit("onSuccess");
  },()=> {
    // 失败回调
    emit("onFail");
  });
  objImg.value.init();
};
// 刷新图片
const Event_restImg = () => {
  objImg.value.reset();
};
const closePupUp = () => {
  emit("closePupUp");
}
onMounted(() => {
  Event_initImg();
})
</script>

<style lang="scss">
.sliding-pictures {
  width: 330px;
  margin: 10px auto;
  box-sizing: border-box;
  padding: 10px;
  background-color: #eee;
  border-radius: 5px;
  .operation {
    width: 100%;
    height: 40px;
    & > .bottom-box {
      margin: 10px 10px 10px 0;
    }
  }
}
.container {
  width: 310px;
  /* margin: 100px auto; */
}
#msg {
  width: 100%;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
}
a:link,
a:visited,
a:hover,
a:active {
  margin-left: 100px;
  color: #0366d6;
}
.block {
  position: absolute;
  left: 0;
  top: 0;
}
.sliderContainer {
  position: relative;
  text-align: center;
  width: 310px;
  height: 40px;
  line-height: 40px;
  margin-top: 15px;
  background: #f7f9fa;
  color: #45494c;
  border: 1px solid #e4e7eb;
}
.sliderContainer_active .slider {
  height: 38px;
  top: -1px;
  border: 1px solid #1991fa;
}
.sliderContainer_active .sliderMask {
  height: 38px;
  border-width: 1px;
}
.sliderContainer_success .slider {
  height: 38px;
  top: -1px;
  border: 1px solid #52ccba;
  background-color: #52ccba !important;
}
.sliderContainer_success .sliderMask {
  height: 38px;
  border: 1px solid #52ccba;
  background-color: #d2f4ef;
}
.sliderContainer_success .sliderIcon {
  background-position: 0 0 !important;
}
.sliderContainer_fail .slider {
  height: 38px;
  top: -1px;
  border: 1px solid #f57a7a;
  background-color: #f57a7a !important;
}
.sliderContainer_fail .sliderMask {
  height: 38px;
  border: 1px solid #f57a7a;
  background-color: #fce1e1;
}
.sliderContainer_fail .sliderIcon {
  background-position: 0 -83px !important;
}
.sliderContainer_active .sliderText,
.sliderContainer_success .sliderText,
.sliderContainer_fail .sliderText {
  display: none;
}
.sliderMask {
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  border: 0 solid #1991fa;
  background: #d1e9fe;
}
.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background 0.2s linear;
}
.slider:hover {
  background: #1991fa;
}
.slider:hover .sliderIcon {
  background-position: 0 -13px;
}
.sliderIcon {
  position: absolute;
  top: 15px;
  left: 13px;
  width: 14px;
  height: 10px;
  background: url(@/assets/images/tb.png) 0 -26px;
  background-size: 34px 471px;
}
.refreshIcon {
  position: absolute;
  right: 0;
  top: 0;
  width: 34px;
  height: 34px;
  cursor: pointer;
  background: url(@/assets/images/tb.png) 0 -437px;
  background-size: 34px 471px;
  display: none;
}
</style>